<template>
  <!-- 职业测评，未解锁状态 -->
  <page-wrap
    title="职业测评"
    ref="pageWrap"
    hideTab
    back
    :showTop="false"
    :dark="true"
    hideSafeArea
    :bg-color="uNavColor"
  >
    <view class="allContainer" :style="[{ position: 'relative' }]">
      <view
        :style="[
          { position: 'fixed' },
          { zIndex: '900' },
          { width: '750rpx' },
          { backgroundColor: tabsListBgColor }
        ]"
      >
        <view :style="[{ width: '100%' }, { height: '180rpx' }]"></view>
        <u-tabs
          class="tabsList"
          :current="currentIndex"
          name="tagName"
          :list="tabList"
          @change="handleChangeTabs"
          height="55"
          :active-item-style="activeItemStyle"
          :bg-color="transform"
          :gutter="24"
          :bar-style="barStyle"
          font-size="28"
          :inactive-color="'#75957f'"
        ></u-tabs>
      </view>

      <image
        :src="coverImgUrl"
        :style="[{ width: '750rpx' }, { height: '1287rpx' }]"
      />

      <view class="baseBgBox">
        <!-- 个性特征描述  -->
        <PersonalityAttributes
          :dataItem="personalityAttributes"
          @listenRect="listenRect"
        />
      </view>

      <view class="checkMore" @click="clickCheckMore"> 解锁查看更多 > </view>
    </view>
    <career-assess-bottom-dialog
      ref="careerAssessRef"
      @closeBottomDialogBack="closeBottomDialogBack"
      @componentPay="componentPay"
      :price="price"
    ></career-assess-bottom-dialog>
    <career-asses-first-coupon-dialog
      ref="careerAssessFirstRef"
      @closeFirstDialogBack="closeFirstDialogBack"
      @componentPay="componentPay"
      :price="price"
      :firstCoupon="firstCoupon"
    >
    </career-asses-first-coupon-dialog>
    <career-asses-second-coupon-dialog
      ref="careerAssessSecondRef"
      @closeSecondDialogBack="closeSecondDialogBack"
      @componentPay="componentPay"
      :price="price"
      :SecondCoupon="SecondCoupon"
    ></career-asses-second-coupon-dialog>
  </page-wrap>
</template>

<script>
import { showDelayToastTip, getDivineBeastCover } from '@/utils/handle';
import {
  careerAssessPayAndUnlock,
  getProductDetail
} from '@/api/modules/activity';
import { careerAssessRegularInfoNew } from '@/utils/data';
import PersonalityAttributes from './PersonalityAttributes.vue';
import CareerAssessBottomDialog from './CareerAssessBottomDialog.vue';
import CareerAssesFirstCouponDialog from './CareerAssesFirstCouponDialog.vue';
import CareerAssesSecondCouponDialog from './CareerAssesSecondCouponDialog.vue';
export default {
  components: {
    PersonalityAttributes,
    CareerAssessBottomDialog,
    CareerAssesFirstCouponDialog,
    CareerAssesSecondCouponDialog
  },

  props: {
    scrollRes: {
      type: Object,
      default: function () {
        return {};
      }
    },

    resultInfo: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },

  data() {
    return {
      screenWidth: 0,
      screenHeight: 0,
      uNavColor: 'transparent',
      tabsListBgColor: 'transparent',
      currentIndex: 0,
      scrollDomId: '',
      showTop: false,
      activeItemStyle: careerAssessRegularInfoNew.activeItemStyle,
      barStyle: careerAssessRegularInfoNew.barStyle,

      coverImgUrl: careerAssessRegularInfoNew.coverImgUrl,

      tabList: careerAssessRegularInfoNew.tabList,

      barTopDistance: careerAssessRegularInfoNew.barTopDistance,

      partHeightPxList: careerAssessRegularInfoNew.partHeightPxList,
      personId: uni.getStorageSync('person-id').slice(2) || undefined,

      openId: uni.getStorageSync('openid'),
      companyId: uni.getStorageSync('company-id'),
      provider: '',

      // 是否是通过点击切换模块
      isChangeTabByClick: false,
      currentScrollTop: 0,
      personalityAttributes: {},
      noClaimCouponId: '',
      price: 0, //原始价格 29.9
      firstCoupon: 0, //第一次挽留优惠券10元
      SecondCoupon: 0, //第二次挽留优惠券20元
      firstCouponId: '', //第一次挽留优惠券10元 id
      SecondCouponId: '', //第二次挽留优惠券20元 id
      reportPrice: 0 //上报支付的价格 用于广告投放上报参数
    };
  },

  watch: {
    resultInfo: {
      handler(val) {
        this.personalityAttributes = contentV2.personalityAttributes;
        this.coverImgUrl = getDivineBeastCover(val.dataType);
      },
      deep: true, // 深度监听
      immediate: true // 初始化的时候立刻执行一次
    },

    scrollRes: {
      handler(val) {
        this.onThisPageScroll(val);
      },
      deep: true, // 深度监听
      immediate: true // 初始化的时候立刻执行一次
    }
  },

  onLoad() {},
  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenWidth = systemInfo.windowWidth;
    this.screenHeight = systemInfo.windowHeight;
  },
  created() {
    uni.getProvider({
      service: 'payment',
      success: (res) => {
        this.provider = res.provider;
      }
    });
    this.reQgetProductDetail();
  },
  mounted() {},

  methods: {
    listenRect(rect, index) {
      this.partHeightPxList[index] = rect.height;
    },
    onThisPageScroll(res) {
      this.currentScrollTop = res.scrollTop;

      if (res.scrollTop > 0) {
        this.uNavColor = '#ffffff';
        this.tabsListBgColor = '#ccdec1';
      } else {
        this.uNavColor = 'transparent';
        this.tabsListBgColor = 'transparent';
      }
      this.calculateScrollDistanceByScrollTop();
      this.isChangeTabByClick = false;
    },

    calculateScrollDistanceByScrollTop() {
      if (this.isChangeTabByClick) {
        return;
      }
      var distance = 0;
      for (var i = 0; i < 9; i++) {
        distance += this.partHeightPxList[i];
        if (this.currentScrollTop < distance - this.barTopDistance) {
          if (i <= 1) {
            this.currentIndex = 0;
            return;
          }
          this.currentIndex = i - 1;
          return;
        }
      }
    },

    calculateScrollDistance(index) {
      if (index == 0) {
        return this.partHeightPxList[0];
      }
      var result = 0;
      for (var i = 0; i <= index; i++) {
        result += this.partHeightPxList[i];
      }
      return result;
    },

    handleChangeTabs(index) {
      console.log('index = ' + index);
      this.currentIndex = index;
      this.isChangeTabByClick = true;
      uni.pageScrollTo({
        scrollTop: this.calculateScrollDistance(index) - this.barTopDistance,
        duration: 0
      });
    },

    clickCheckMore() {
      // 点击解锁
      this.handleUnlockByPay();
    },

    // 支付解锁
    handleUnlockByPay() {
      console.log('支付解锁', this.openId, this.personId);
      this.$refs.careerAssessRef.init();
    },

    //关闭底部弹窗回调 弹出第一次优惠券弹窗
    closeBottomDialogBack() {
      this.$refs.careerAssessFirstRef.init();
    },
    //关闭第一次优惠券弹窗回调 弹第二次优惠券弹窗
    closeFirstDialogBack() {
      this.$refs.careerAssessSecondRef.init();
    },
    //关闭第二次优惠券弹窗回调
    closeSecondDialogBack() {},
    //获取产品详情 价格和优惠券
    reQgetProductDetail() {
      let param = {
        personId: this.personId
      };
      getProductDetail(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (res.data) {
            //后台数组先返回20优惠卷 10 优惠卷
            if (res.data.couponList && res.data.couponList.length) {
              this.firstCoupon = res.data.couponList[0].amount;
              this.SecondCoupon = res.data.couponList[1].amount;
              this.firstCouponId = res.data.couponList[0].id;
              this.SecondCouponId = res.data.couponList[1].id;
            }
            if (res.data.skuStockList && res.data.skuStockList.length) {
              //后台说数组永远只有一个 取第一个数据的价格为商品原始价格
              this.price = res.data.skuStockList[0].price;
            }
          }
        } else {
          showDelayToastTip(res.status_desc, 50);
        }
      });
    },
    //组件支付回调
    componentPay({ type }) {
      ////自定义参数 1.原价购买 2.减免10元优惠券购买,3.减免20元优惠券购买
      if (type == 1) {
        this.noClaimCouponId = '';
        this.reportPrice = this.price;
      } else if (type == 2) {
        this.noClaimCouponId = this.firstCouponId;
        this.reportPrice = (this.price - this.firstCoupon).toFixed(1);
      } else if (type == 3) {
        this.noClaimCouponId = this.SecondCouponId;
        this.reportPrice = (this.price - this.SecondCoupon).toFixed(1);
      }
      uni.showLoading();
      let param = {
        personId: this.personId,
        openId: this.openId,
        activityType: 'careerAssessment',
        noClaimCouponId: this.noClaimCouponId
      };

      careerAssessPayAndUnlock(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          let payInfo = res.data.payInfo;
          this.requestPayment(payInfo);
        } else {
          uni.hideLoading();
          showDelayToastTip(res.status_desc, 50);
        }
      });
    },

    // 支付
    requestPayment(data) {
      if (this.provider.indexOf('wxpay') < 0) {
        return;
      }
      data.payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: data.payData.timeStamp,
        nonceStr: data.payData.nonceStr,
        package: data.payData.package,
        signType: data.payData.signType,
        paySign: data.payData.paySign,
        success: (res) => {
          this.handlePaySuccess(res);
        },
        fail: (err) => {
          this.handlePayFial(err);
        }
      });
    },
    handlePaySuccess(res) {
      uni.hideLoading();
      this.loading = false;

      showDelayToastTip('购买成功', 50);
      this.$emit('refreshCareerAssessData', {});
      getApp().reportPURCHASENew(this.reportPrice);
    },
    handlePayFial(res) {
      uni.hideLoading();
      this.loading = false;

      showDelayToastTip('购买失败', 50);
    }
  }
};
</script>

<style lang="scss" scoped>
.allContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.checkMore {
  width: 656rpx;
  margin-left: 47rpx;
  margin-right: 47rpx;
  height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  color: white;
  background-image: linear-gradient(0deg, #1ecfa0 0%, #2dc39d 100%);
  box-shadow: 2rpx 3rpx 30rpx 2rpx rgba(99, 120, 95, 0.51);
  border-style: solid;
  border-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-image-source: linear-gradient(0deg, #82c653 0%, #f4ff98 100%);
  border-image-slice: 1;
  //border-radius: 4px;

  clip-path: inset(0 round 4px);
  position: fixed;
  bottom: 107rpx;
  z-index: 200;
}

.baseBgBox {
  width: 100%;
  // background-size: 100% 100%;
  // background-image: url($img-base + "career/careerAssessResult/base_bg.png");
  //background-repeat: no-repeat;
  background-color: #c6d8c0;
}
</style>
